<template>
  <cube-page type="validator-view" title="学情管理--批阅作业" desc>
    <div slot="content">
      <!-- 老师查看作业详情 -->
      <div class="teacher-job">
        <!-- <h1 class="title">学情管理--批阅作业</h1> -->
        <h5 class="studentName">{{homework.student_name}}</h5>
        <div class="job-detail">
          <h2 class="sub-title">作业信息</h2>
          <div class="job-item">
            <p>书籍名称：{{homework.book_name}}</p>
            <p>书籍作者：{{homework.author}}</p>
            <!-- <p>阅读作业时间：{{homework.crate_time }}至{{homework.deadline}}</p> -->
            <p>作业描述：{{homework.pagenums}}</p>
            <!-- <p>发布作业老师：{{homework.teacherName}}</p> -->
            <p class="item-rate">
              <span>心情指数：</span>
              <cube-rate
                v-if="homework.heardindice!=''"
                v-model="homework.heardindice"
                :disabled="disabled"
                :justify="justify"
              ></cube-rate>
              <span class="item-undo" v-else>待学生完成阅读提交</span>
            </p>
            <p class="item-rate">
              <span>推荐指数：</span>
              <cube-rate
                v-if="homework.introduce_num!=''"
                v-model="homework.introduce_num"
                :disabled="disabled"
                :justify="justify"
              ></cube-rate>
              <span class="item-undo" v-else>待学生完成阅读提交</span>
            </p>
            <p>
              <span class="item-fund">阅读积累：</span>
              <span v-if="homework.readFund">{{homework.readFund }}</span>
              <span class="item-undo" v-else>待学生完成阅读提交</span>
            </p>
            <p>
              <span class="item-reaction">读后感：</span>
              <span v-if="homework.read_note">{{homework.read_note }}</span>
              <span class="item-undo" v-else>待学生完成阅读提交</span>
            </p>
          </div>
        </div>
        <!-- 家长未评价 -->
        <div class="job-parent" v-if="homework.status=='1'||homework.status=='3'">
          <h2 class="sub-title">家长评价</h2>
          <div class="job-item">
            <p class="item-undo">家长暂未评价</p>
          </div>
        </div>
        <!-- 家长已评价 -->
        <div class="job-parent" v-if="homework.status=='2'||homework.status=='4'">
          <h2 class="sub-title">家长评价</h2>
          <div class="job-item">
            <p class="parentEvaluate">
              <span>家长心情：</span>
              <img
                v-if="homework.parent_evaluate==options[0].value"
                class="cubeic-icon"
                :src="iamges[0].src"
              >
              <img
                v-if="homework.parent_evaluate==options[1].value"
                class="cubeic-icon"
                :src="iamges[1].src"
              >
              <img
                v-if="homework.parent_evaluate==options[2].value"
                class="cubeic-icon"
                :src="iamges[2].src"
              >
            </p>
            <p>
              <span class="item-reaction">家长评语：</span>
              {{homework.parent_suggest}}
            </p>
          </div>
        </div>
        <!-- 老师已评价 -->
        <div class="job-teacher" v-if="homework.status=='3'||homework.status=='4'">
          <h2 class="sub-title">老师评价</h2>
          <div class="job-item">
            <p>
              老师评价：
              <span
                class="item-status item-golden"
                v-if="homework.teacher_evaluate==options[0].value"
              >
                优秀
                <i class="cubeic-vip"></i>
              </span>
              <span
                class="item-status item-blue"
                v-else-if="homework.teacher_evaluate==options[1].value"
              >
                良好
                <i class="cubeic-good"></i>
              </span>
              <span
                class="item-status item-red"
                v-else-if="homework.teacher_evaluate==options[2].value"
              >
                不合格
                <i class="cubeic-bad"></i>
              </span>
            </p>
            <p>
              <span class="item-reaction">老师评语：</span>
              {{homework.teacher_remark}}
            </p>
          </div>
        </div>
        <!-- 老师未评价 -->
        <div class="job-teacher" v-if="homework.status=='1'||homework.status=='2'">
          <h2 class="sub-title">老师评价</h2>
          <div class="job-item">
            <p>老师评级：
              <cube-checker v-model="homework.teacher_evaluate" :options="options" type="radio">
                <cube-checker-item
                  class="checker-item"
                  :key="options[0].value"
                  :option="options[0]"
                >
                  <span class="item-golden">
                    优秀
                    <i class="cubeic-vip"></i>
                  </span>
                </cube-checker-item>
                <cube-checker-item
                  class="checker-item"
                  :key="options[1].value"
                  :option="options[1]"
                >
                  <span class="item-blue">
                    良好
                    <i class="cubeic-good"></i>
                  </span>
                </cube-checker-item>
                <cube-checker-item
                  class="checker-item"
                  :key="options[2].value"
                  :option="options[2]"
                >
                  <span class="item-red">
                    不合格
                    <i class="cubeic-bad"></i>
                  </span>
                </cube-checker-item>

                <cube-validator
                  ref="validator0"
                  v-model="result[0]"
                  :model="homework.teacher_evaluate"
                  :rules="rules0"
                  :messages="messages0"
                ></cube-validator>
              </cube-checker>
            </p>
            <p>
              <span class="item-reaction">老师评语：</span>
              <cube-validator
                ref="validator1"
                :model="homework.teacher_remark"
                :rules="rules1"
                :messages="messages1"
                v-model="result[1]"
              >
                <cube-textarea :placeholder="placeholder" v-model="homework.teacher_remark"></cube-textarea>
              </cube-validator>
            </p>
            <p>
              <cube-button :primary="true" @click="submit">提交</cube-button>
            </p>
          </div>
        </div>
      </div>
    </div>
  </cube-page>
</template>

<script>
import CubePage from "@/components/cube-page.vue";
export default {
  name: "TeacherJob",
  data() {
    return {
      justify: false,
      disabled: true,
      homework: {},
      iamges: [
        {
          src: require("../../assets/img/0.png")
        },
        { src: require("../../assets/img/1.png") },
        { src: require("../../assets/img/2.png") }
      ],
      result: [undefined, undefined],
      rules0: {
        required: true,
        custom: val => {
          return val !== 0;
        }
      },
      messages0: {
        custom: "请选择您对该生作业的评价."
      },

      placeholder: "请输入您的评价",
      rules1: {
        required: true,
        type: "string",
        custom: val => {
          return val !== "";
        }
      },
      messages1: {
        custom: "请输入您对该生作业的评语."
      },
      options: [
        {
          value: 1
        },
        {
          value: 2
        },
        {
          value: 3
        }
      ]
    };
  },
  components: {
    CubePage
  },
  created() {
    let requestData = {
      homeworkId: this.$store.state.homeworkId,
      studentId: this.$store.state.studentId
    };

    this.$http
      .post("/api000025", requestData)
      .then(response => {
        this.homework = response.data;
        if (!this.homework.teacher_remark) {
          this.homework.teacher_remark = "";
        }
      })
      .catch(error => {
        this.$createToast({
          type: "error",
          txt: error,
          time: 1000
        }).show();
      });
  },
  mounted() {},
  computed: {
    parentSuggest: function() {
      if (this.$route.query.parentSuggest) {
        return this.$route.query.parentSuggest;
      } else {
        return "";
      }
    },

    teacher_remark: function() {
      if (this.$route.query.teacheRemark) {
        return this.$route.query.teacheRemark;
      } else {
        return "";
      }
    }
  },
  methods: {
    submit() {
      Promise.all(
        Object.keys(this.$refs).map(key => {
          return this.$refs[key].validate();
        })
      ).then(() => {
        if (this.result.every(item => item)) {
          let requestData = {
            homeworkId: this.homework.homework_id,
            studentId: this.homework.student_id,
            teacherEvaluate: this.homework.teacher_evaluate,
            teacherRemark: this.homework.teacher_remark
          };
          this.$http
            .post("/api000023", requestData)
            .then(response => {
              if (response.status == 200) {
                this.$createToast({
                  type: "correct",
                  txt: "评价成功！",
                  time: 1000,
                  onTimeout: () => {
                    this.$router.go(-1);
                  }
                }).show();
              }
            })
            .catch(error => {
              this.$createToast({
                type: "error",
                txt: error,
                time: 1000
              }).show();
            });
        }
      });
    }
  }
};
</script>

<style lang="scss">
.teacher-job {
  margin: 20px;
  font-size: 12px;
  .studentName {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
  }
  .job-detail,
  .job-teacher,
  .job-parent {
    margin-top: 20px;
    .sub-title {
      text-align: left;
      color: #fc9153;
      font-size: 16px;
      font-weight: 700;
      padding-bottom: 5px;
      border-bottom: 1px solid #fcc;
    }
    .job-item {
      p {
        margin: 15px 8px;
        .checker-item {
          display: inline-block;
          vertical-align: middle;
          text-align: center;
          padding: 5px;
          margin-right: 10px;
          color: #fff;
          border-radius: 4px;
          position: relative;
          background: #fff;
        }
        /* 设置优秀字体颜色 */
        .item-golden {
          color: goldenrod;
        }
        /* 设置良好字体颜色 */
        .item-blue {
          color: blue;
        }

        /* 设置不合格字体颜色 */
        .item-red {
          color: red;
        }
        /* 设置家长心情图片宽度 */
        .cubeic-icon {
          width: 30px;
        }
      }
      .item-rate {
        display: flex;
        align-items: center;
        span {
          word-wrap: unset;
          flex-shrink: 0;
        }
        ul {
          width: auto;
        }
      }
      .item-reaction {
        line-height: 20px;
      }
      .item-undo {
        font-size: 10px;
        color: rgb(138, 143, 143);
      }
    }
    .parentEvaluate {
      display: flex;
      align-items: center;
    }
  }
  // 设置老师评级选择处的上边距
  .cube-checker {
    margin-top: 10px;
  }

  .custom-msg {
    color: orange;
  }
  .cube-validator_warn textarea {
    border: solid 1px yellow;
  }
}
</style>